import React from 'react';
import {WeaLocaleProvider, WeaTools} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import Homepage from './Homepage';
import {SYNERGY_PATH_OBJ, SYNERGY_WIDTH} from '../constants/Synergy';

class Synergy extends React.Component {
    state = {hpid: 0, isuse: false, width: SYNERGY_WIDTH, visible: false, btnHover: false};

    constructor(props) {
        super(props);
        this.getSynergyPortal = this.getSynergyPortal.bind(this);
        this.isShowSynergy = this.isShowSynergy.bind(this);
    }

    componentWillMount() {
        const {pathname, workflowid, requestid} = this.props;

        if (pathname != '/workflow/req' || (pathname == '/workflow/req' && !!workflowid && !!requestid)) {
            this.getSynergyPortal(this.props);
        }
    }

    componentDidMount() {
        window.isShowSynergy = this.isShowSynergy;
    }

    componentWillReceiveProps(nextProps) {
        const isNeedReq = (
            this.props.pathname != nextProps.pathname ||
            this.props.workflowid != nextProps.workflowid ||
            this.props.requestid != nextProps.requestid ||
            this.props.secid != nextProps.secid ||
            this.props.docid != nextProps.docid
        );

        if (isNeedReq) {
            this.getSynergyPortal(nextProps);
        }
    }

    shouldComponentUpdate(nextProps, nextState) {
        return (
            this.state.hpid != nextState.hpid ||
            this.state.isuse != nextState.isuse ||
            this.state.visible != nextState.visible ||
            this.state.btnHover != nextState.btnHover ||
            this.props.formData != nextProps.formData
        );
    }

    render() {
        const {workflowid = -1, requestid = -1, formData = {}} = this.props;
        const {hpid, isuse, width, visible, btnHover} = this.state;

        if (hpid != 0 && isuse) {
            let content = <div></div>;
            if (visible) {
                content = (
                    <div style={{position: 'absolute', top: 0, right: 0, zIndex: 998, width: '100%', height: '100%', padding: '10px', overflow: 'auto', background: '#f6f7f9', borderLeft: '1px solid #e2e2e2'}}>
                        <Homepage ecId={`${this && this.props && this.props.ecId || ''}_Homepage@gq4l93`} hpid={hpid} workflowid={workflowid} requestid={requestid} formData={formData}/>
                    </div>
                );
            }
            let style = {
                position: 'absolute',
                top: '50%',
                left: '1px',
                zIndex: 999,
                width: '16px',
                height: '60px',
                background: `url(${`/spa/portal/images/synergy/${visible ? `${btnHover ? 'right_hover.png' : 'right.png'}` : `${btnHover ? 'left_hover.png' : 'left.png'}`}`}) center no-repeat`,
                cursor: 'pointer'
            }
            if(!visible){
                style = {
                    position: 'absolute',
                    top: '50%',
                    right: '0',
                    zIndex: 999,
                    width: '16px',
                    height: '60px',
                    background: `url(${`/spa/portal/images/synergy/${visible ? `${btnHover ? 'right_hover.png' : 'right.png'}` : `${btnHover ? 'left_hover.png' : 'left.png'}`}`}) center no-repeat`,
                    cursor: 'pointer'
                }
            }
            return (
                <div style={{position: 'absolute', top: 0, right: 0, height: '100%', width: visible ? width: 0}}>
                    {content}
                    <div
                        style={style}
                        title={visible ? getLabel(387991,"隐藏协同区") : getLabel(387992,"显示协同区")}
                        onClick={() => this.setState({visible: !visible})}
                        onMouseOver={() => this.setState({btnHover: true})}
                        onMouseOut={() => this.setState({btnHover: false})}
                    />
                </div>
            );
        } else {
            return <div></div>;
        }
    }

    getSynergyPortal(params) {
        let {pathname, workflowid = -1, requestid = -1, secid = -1, docid = -1} = params;

        if (pathname == '/workflow/req' && requestid == -1) {
            pathname = '/workflow/req?iscreate=1';
        }

        const pathObj = SYNERGY_PATH_OBJ[pathname] || {};

        WeaTools.callApi('/api/portal/synergy/getSynergyPortal', 'GET', {
            path: pathObj.path || '',
            pathparam: pathObj.pathparam || '',
            workflowid: workflowid,
            requestid: requestid,
            secid: secid,
            docid: docid
        }).then((data) => {
            this.setState({
                hpid: data.hpid || 0,
                isuse: data.isuse || false,
                width: data.width || SYNERGY_WIDTH,
                visible: data.defaultExpand == 1 ? true : false
            });
        });
    }

    isShowSynergy(visible) {
        this.setState({visible: visible});
    }
}

export default Synergy;
